import 'package:flutter/material.dart';
import 'package:kasax_demos2/entry/data_posts_test.dart';
import 'package:kasax/utils/color_utils.dart';
import 'package:kasax_demos2/entry/entrys.dart';

class GridViewDemo extends StatefulWidget {
  const GridViewDemo({Key? key}) : super(key: key);

  @override
  _GridViewDemoState createState() => _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {
  List<Posts> _list = PostsDatas.TEST_POSTS;
  var _gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, mainAxisSpacing: 3, crossAxisSpacing: 3);
  var _scrollPhysics = NeverScrollableScrollPhysics();
  var _gridDelegateExtent = SliverGridDelegateWithMaxCrossAxisExtent(
      //单个子Widget的水平最大宽度
      maxCrossAxisExtent: 40,
      //水平单个子Widget之间间距
      mainAxisSpacing: 3.0,
      //垂直单个子Widget之间间距
      crossAxisSpacing: 3.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridView"),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              Text("CustomScrollView+SliverGrid"),
              CustomScrollView(
                shrinkWrap: true,
                physics: _scrollPhysics,
                slivers: [
                  SliverGrid(
                      delegate: SliverChildBuilderDelegate((context, index) {
                        return buildContainer(index);
                      }, childCount: _list.length),
                      gridDelegate: _gridDelegate)
                ],
              ),
              SizedBox(
                height: 15,
              ),
              Text("SliverGridDelegateWithMaxCrossAxisExtent"),
              CustomScrollView(
                shrinkWrap: true,
                physics: _scrollPhysics,
                slivers: [
                  SliverGrid(
                      delegate: SliverChildBuilderDelegate((context, index) {
                        return buildContainer(index);
                      }, childCount: _list.length),
                      gridDelegate: _gridDelegateExtent)
                ],
              ),
              SizedBox(
                height: 15,
              ),
              Text("with builder"),
              GridView.builder(
                  physics: _scrollPhysics,
                  shrinkWrap: true,
                  itemCount: _list.length,
                  gridDelegate: _gridDelegate,
                  itemBuilder: (context, index) {
                    return buildContainer(index);
                  }),
              SizedBox(
                height: 15,
              ),
              Text("with count"),
              GridView.count(
                physics: _scrollPhysics,
                shrinkWrap: true,
                crossAxisCount: 3,
                children: _list.map((e) => buildContainerContent(e)).toList(),
              ),
              SizedBox(
                height: 15,
              ),
              Text("with custom"),
              GridView.custom(
                  shrinkWrap: true,
                  physics: _scrollPhysics,
                  gridDelegate: _gridDelegate,
                  childrenDelegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return buildContainer(index);
                  }, childCount: _list.length))
            ],
          ),
        ),
      ),
    );
  }

  Container buildContainer(int index) {
    var info = _list[index];
    return buildContainerContent(info);
  }

  Container buildContainerContent(Posts info) {
    return Container(
      alignment: Alignment.center,
      color: buildRandomColor(),
      child: Text(
        info.title,
        textAlign: TextAlign.center,
      ),
    );
  }
}
